#{extends 'noTab.html' /}

<html>
<head>
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/homePage.css'}" />
 <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/secure.css'}" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

			$(document).ready(function(){
     $('#image2').hide();
     });
     
     $(document).ready(function(){
b     
   var refreshId = setInterval(function()
   {$(imageSwap)}, 3000);
     });
     
     var showing = 1;
     
     function imageSwap(){
     
     if(showing == 1){
     $('#image1').fadeOut();
     $('#image1').hide();
     $('#image2').fadeIn('slow',function(){});
     showing = 0;
     }
     else{
     $('#image2').fadeOut();
     $('#image2').hide();
    $('#image1').fadeIn('slow',function(){});
     showing = 1;
     }
     
     
     };

</script>
</head>

<body>
<div id="slideShow">

<a id = "image1">
<img id="image" src ="/public/images/homePageLogo.jpg" width ="500px" height = "150px" ></img> 
<p > (Web's Name) is the workplace revolution that we have all been waiting for. 
	Join now and take your comapny to the next level
</p> 
</a>

<a id="image2">
<img id="image" src ="/public/images/team.jpg"></img> 
<p> A team of 25 programmers worked hard for a whole month to bring you this,
	the ultimate workspace enhancement
</p> 

<a id="credits" href="@{Browse.credits()}"> view credits </a>

</a>


</div>





<div id="login">
	
	<h1>&{'secure.title'}</h1>
		
	#{form @Secure.authenticate()}
		
		#{if flash.error}
			<p class="error">
				&{flash.error}
			</p>
		#{/if}
		#{if flash.success}
			<p class="success">
				&{flash.success}
			</p>
		#{/if}
	
		<p id="username-field">
			<label for="username">&{'secure.username'}</label>
			<input type="text" name="username" id="username" value="${flash.username}" />
		</p>
		<p id="password-field">
			<label for="password">&{'secure.password'}</label>
			<input type="password" name="password" id="password" value="" />
		</p>
		<p id="remember-field">
			<input type="checkbox" name="remember" id="remember" value="true" ${flash.remember ? 'checked="true"' : ''} />
			<label for="remember">&{'secure.remember'}</label>
		</p>
		
		<p id="signin-field">
			<input type="submit" id="signin" value="&{'secure.signin'}" /> 
			<a  class="standardLink"> Forgot your password?</a>
		</p>
		 
	#{/form}
</div>


<p>
New member?
</p>
	<a id="registerHome" href="@{Users.register()}" class="standardLink">Register</a>

<style type="text/css">
#registerHome{
font-style: italic;
}
</style>
</body>
</html>